<template>
    <div class="box">
      <div class="header">
        <div @click="changeb()" :class="!btn?'a':'b'">{{!btn?a.tit1:a.tit2}}</div>
        <div v-if="base" @click="changea()" :class="btn?'a':'b'">{{!btn?b.tit1:b.tit2}}</div>
      </div>

      <van-list
        :immediate-check="check"
        :finished="finished"
        v-model="loading"
        :error.sync="error"
        loading-text="loading"
        finished-text="更新なし"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <div class="shopList" v-show="btn">
        <div class="shop" @click="goMessage(n.id)" v-for="n in list">

        <img :src="n.picUrl" alt="">
        <div class="reg"><span class="pinzhi">{{n.valueStandard}}</span>{{n.brandName}}</div>
        <div class="name">{{n.productName}}</div>
        <p class="price"><span>スタート：</span>{{n.commissionPrice}}</p>
        <p v-if="n.valence>0" class="valence">最高の値：<span>{{n.valence}}</span></p>
        <p class="num"><span>番号：</span>{{n.id}}</p>
        </div>
        <p v-show="list.length==0" style="position: fixed;top: 45%;left: 0;width: 100%;text-align: center">入札情報なし</p>
        </div>
      </van-list>
      <div class="shopList" v-show="!btn">
        <div class="shop" @click="goMessage(n.id)" v-for="n in shops">
          <img :src="n.picUrl" alt="">
          <div class="reg"><span class="pinzhi">{{n.valueStandard}}</span>{{n.brandName}}</div>
          <div class="name">{{n.productName}}</div>
          <p class="price"><span>スタート：</span>{{n.commissionPrice}}</p>
          <p v-if="n.valence>0" class="valence">最高の値：<span>{{n.valence}}</span></p>
          <p class="num"><span>番号：</span>{{n.id}}</p>

        </div>
        <p v-show="shops.length==0" style="position: fixed;top: 45%;left: 0;width: 100%;text-align: center">入札情報なし</p>
      </div>
      <div class="lastbtn">
        <div class="btn" @click="goshop()">自社入札<span class="right"></span></div>
      </div>

    </div>
</template>

<script>
  import { List } from 'vant';

  Vue.use(List);
  import { Toast } from 'vant';

  Vue.use(Toast);
  let loadingTemp = false;
  import Vue from 'vue';
  import { Lazyload } from 'vant';
  // options 为可选参数，无则不传
  Vue.use(Lazyload,{
    lazyComponent:true,

  })
    import axios from "axios"
    export default {
        name: "shopList",
      data(){
          return{
            check:false,
            finished:false,
            error: false,
            loading: false,
            NONT:false,
            shops:[],
            isLoading: false,
            list:[

            ],
            base:true,
            btn:true,
            mask:true,
            a:{
              tit1:"今回出品",
              tit2:"BUセリ出品状況"
            },
            b:{
              tit1:"BUセリ結果状況",
              tit2:"相場履歴"
            },
            total:"",
            pages:2,
            token:"",
            pageSize:10,
            pageNum:0,
            userid:""
          }
      },
     
      methods:{
        onLoad() {
          console.log("到底了")

          this.init()

        },


          getUserInfo(){
          if(this.$route.query.brandUserId){
            this.userid= this.$route.query.brandUserId
          }else{
            var str1 = window.location.href
            console.log(str1)
            if(str1.indexOf("?")>0){
              var str = window.location.href.split("?")[1]
              var arr = str.split("&")
              arr.forEach(r=>{
                var key = r.split("=")[0]
                var val = r.split("=")[1]

                if(key=="brandUserId"){
                  this.userid = val
                }
                if(key == "token"){
                  this.token = val
                }
              })
              console.log(this.userid)

            }else{
              this.$router.push("/login")
            }
          }


          },

          // 跳转到详情页
        goMessage(i){
          console.log(this.userid)
          console.log(i)
          // '/GoodsDetails?&userId='+this.userid+'&productId='+i
          this.$router.push({
            path: '/GoodsDetails',
            query: {
              userId: this.userid,
              productId:i
            }

          })
        },
        changea(){
          if(!this.btn){
            return
          }
          console.log(this.btn)
          this.btn=false

        },
        changeb(){
          if(this.btn){

            return
          }
          console.log(this.btn)
          this.btn=true

        },
        goshop(){


          this.$router.push({
            path: '/myShopList',
            query: {
              userId: this.userid
            }
          })
        },

        init() {
          loadingTemp = true
          this.pageNum =this.pageNum + 1;
          console.log(this.userid)
          axios.get('http://auction.growthupup.com/wap/product/page?pageNum='+this.pageNum+"&userId="+this.userid+"&pageSize="+this.pageSize+"&token="+this.token)
            .then(res => {
              this.loading = true;
              loadingTemp=false
              this.list = this.list.concat(res.data.data.data)
              this.loading = false
              this.pages = res.data.data.pages
              console.log(res.data.data.pageNum)
              if(res.data.data.pageNum==1){
                this.list = res.data.data.data
              }else{
                res.data.data.data.forEach(r=>{
                  this.list.push(r)
                })
              }

              console.log(res.data.user)
              if(res.data.user || res.data.user!=null || res.data.user!=""){
                this.userid = res.data.user.id
              }
              if(res.data.data.data.length<10){
                this.finished=true
              }

          })
        },
      },

      created() {
        this.getUserInfo()
          this.init();




      },
      updated() {

      }
    }
</script>

<style lang="scss">
.box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header{
  width:100%;
  display: flex;
  height: .49rem;
  justify-content: space-around;
  box-sizing: border-box;
  overflow-x: hidden;

/*.nav{*/
  /*display: flex;*/
  /*width: 100%;*/
div{
  height: .49rem;
  font-size: .16rem;
  line-height: .46rem;
  transition: all .3s;
  text-align: center;
  overflow: hidden;
  color:#FFFFFF;
}
div:nth-child(1){
  background: #333333;
  margin-right: 4px;

}

div:nth-child(2){
  background: #FF595E;
}
.a{
  width: 20%;
  font-weight:500;
  font-size:.12rem;
  font-family:PingFangSC-Medium;

}
.b{
  width: 77%;
  font-weight:100;
  font-size:.16rem;
  font-family:PingFangSC-Regular;

}
}

.shopList{
  flex:1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  padding:0 .16rem 1rem .16rem;
  box-sizing: border-box;
  justify-content: space-between;
  .shop{
    margin-top: .12rem;
    position: relative;
    width: 48%;
    background:rgba(255,255,255,1);
    box-shadow: 0 .04rem .16rem 0 rgba(0,0,0,0.1);
    padding-bottom: .08rem;
    height:2.6rem;
    /*.cheng{*/
      /*width: ;*/
    /*}*/
    img{
      width: 100%;
      height: 1.66rem;
      margin-bottom: .08rem;
    }
    .reg{
      font-size: .14rem;
      color:#333333;
      display: flex;
      margin-bottom: 4px;
      span{
        display: block;
        width: .19rem;
        height: .19rem;
        background: #333333;
        color:#FFFFFF;
        font-size: .11rem;
        line-height: .19rem;
        text-align: center;
        margin-left: .08rem;
        margin-right: .07rem;
      }
    }
    .name{
      font-size:.12rem;
      font-family:PingFangSC-Light;
      font-weight:300;
      color:rgba(51,51,51,1);
      line-height:.17rem;
      margin-left: .08rem;
      margin-bottom: .04rem;
    }
    .price{
      font-size:.12rem;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(229,32,32,1);
      line-height:.17rem;
      span{
        font-size:9px;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:13px;
        margin-left:.08rem;
      }
    }
    .valence{
      font-size:.09rem;
      font-family:PingFangSC-Light;
      font-weight:300;
      color:rgba(51,51,51,1);
      line-height:.13rem;
      margin-left: .08rem;

    }
    .num{
      font-size:12px;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:.17rem;
      span{
        font-size:9px;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:13px;
        margin-left: .08rem;
      }
    }
    .state{
      width:.5rem;
      height:.29rem;
      background:rgba(229,32,32,1);
      color:#FFFFFF;
      font-size: .18rem;
      position: absolute;
      text-align: center;
      top: 3px;
      right: 3px;
    }
    .start{
      width:.5rem;
      height:.29rem;
      color:#FFFFFF;
      font-size: .18rem;
      position: absolute;
      top: 3px;
      right: 3px;
      background: #888888;
      text-align: center;
    }

  }

}
.lastbtn{
  width: 100%;
  position: fixed;
  bottom: .25rem;
  left: 0;
  .btn{
    margin:0 auto;
    width: 68%;
    height: .6rem;
    background:rgba(229,32,32,1);
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.1);
    border-radius:.35rem;
    font-size:.2rem;
    left: .6rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:.6rem;
    text-align: center;
    .right{
      display: inline-block;
      width: .15rem;
      height: .15rem;
      margin-left: .17rem;
      background-image: url("../assets/image/arrow-right.png");
      background-size: cover;
    }
  }

}
.none{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  .img{
    margin-top: 1.65rem;
  }
  .p{
    margin-top: .48rem;
    color:#697581;
    font-size: .16rem;
    text-align: center;
    margin-bottom: .65rem;
}
  .btn{
    width: 2.45rem;
    height: .58rem;
    text-align: center;
    line-height: .58rem;
    color:#333333;
    font-size: .16rem;
    background: #f5f5f5;
  }
}
</style>
